<nav class="navbar navbar-double navbar-inverse navbar-fixed-bottom" class="bottomNavBar">
  <form id="filter-form" action="/query" method="get">
    <!-- search params popovers -->
    <div id="hideShowKeys" class="search-params-popover">
      <div class="panel panel-default">
        <div class="panel-body">
          <div class="row">
            <div class="col-xs-6">
              <div class="form-group">
                <label for="show-keys-select">Shown keys:</label>
                <select name="shown_keys[]" id="show-keys-select" class="form-control" size="50"></select>
              </div>
            </div>
            <div class="col-xs-6">
              <div class="form-group">
                <label for="hide-keys-select">Hidden keys:</label>
                <select name="hidden_keys[]" id="hide-keys-select" class="form-control" size="50"></select>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="superDatePicker" class="search-params-popover">
      <div class="panel panel-default">
        <div class="panel-body">
          <%= erb :_super_date_picker %>
        </div>
      </div>
    </div>
    <!-- /search params popovers -->
    <div class="navbar-form">
      <div class="row">
        <div class="col-xs-9">
          <div class="input-group" style="width:100%">
            <input type="text" class="form-control" id="query" placeholder="Query..." name='query' size="60" value="<%= h @query.attributes[:query] if @query %>">
            <span class="input-group-btn">
              <input type="hidden" name="per_page" value="<%= params[:per_page] %>"/>
              <input type="hidden" id="time-format" name="time_format" value="<%= @query.time_params[:format] %>"/>
              <button type="submit" class="btn btn-default btn-transparent">Send</button>
            </span>
          </div>
        </div>
        <div class="col-xs-1">
          <div class="form-group" data-toggle="tooltip" title="Save query">
            <a role="button" class="btn btn-link btn-link-alt <%= 'disabled' if @query.persisted %>" <% if !@query.persisted %> id="save-query"<% end %>><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span></a>
          </div>
          <div class="form-group" data-toggle="tooltip" title="Save result as CSV">
            <a role="button" class="btn btn-link btn-link-alt <%= 'disabled' unless @query.time_params[:format] == 'range' %>"
              <%= 'id="save-as-csv"' if @query %>
            >
              <span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span>
            </a>
          </div>
        </div>
        <div class="col-xs-2" align="right">
          <div class="form-group" data-toggle="tooltip" title="Play">
            <a role="button" class="btn btn-link btn-link-alt" id="playBtn"><span class="glyphicon glyphicon-play" aria-hidden="true"></span></a>
          </div>
          <div class="form-group" data-toggle="tooltip" title="Pause">
            <a role="button" class="btn btn-link btn-link-alt disabled" id="pauseBtn"><span class="glyphicon glyphicon-pause" aria-hidden="true"></span></a>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-5">
          <select name="namespaces[]" id="namespaces-select" class="form-control select2" multiple="multiple" data-placeholder="Select some namespaces" size="1">
            <% User.current.available_namespaces.each do |ns| %>
              <option value="<%= ns %>" <%= 'selected="selected"' if @query.namespaces.include?(ns) %>><%= ns %></option>
            <% end %>
          </select>
        </div>
        <div class="col-xs-4">
            <a class="btn btn-default btn-transparent btn-block search-params-btn" id="superDatePickerBtn" data-target='#superDatePicker' role="button" data-toggle="tooltip" data-default-title="" data-original-title="Set time"><span class="glyphicon glyphicon-time" aria-hidden="true"></span> <span class="super-date-picker__period-title"></span></a>
        </div>
        <div class="col-xs-1">
          <div class="form-group" data-toggle="tooltip" title="Hide/Show keys">
            <a class="btn btn-link btn-link-alt hide-show-keys-toggle search-params-btn disabled" role="button" data-target="#hideShowKeys"><span class="glyphicon glyphicon-th" aria-hidden="true"></span></a>
          </div>
          <div class="form-group" data-toggle="tooltip" title="Pre for values">
            <a class="btn btn-link btn-link-alt" role="button" id="preForValues"><span class="glyphicon glyphicon-list" aria-hidden="true"></span></a>
          </div>
        </div>
        <div class="col-xs-2" align="right">
          <div class="form-group" data-toggle="tooltip" title="Add breakpoint">
            <a role="button" class="btn btn-link btn-link-alt" id="breakpointBtn"><span class="glyphicon glyphicon-eject" aria-hidden="true"></span></a>
          </div>
        </div>
      </div>
    </div>
  </form>
</nav>
